.banner-player {
  height: 460px;
  width: 1226px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.banner-player a {
  display: block;
}
.banner-player:has(> a:hover) .highlight-point {
  -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
       -o-animation-play-state: paused;
          animation-play-state: paused;
}
.banner-player .banner-bg {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../image/sidebar/navbar/banner.jpg);
  -o-background-size: cover;
     background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: auto-play 20s step-end infinite;
     -moz-animation: auto-play 20s step-end infinite;
       -o-animation: auto-play 20s step-end infinite;
          animation: auto-play 20s step-end infinite;
}
.banner-player .banner-bg:hover {
  -webkit-animation-play-state: paused;
     -moz-animation-play-state: paused;
       -o-animation-play-state: paused;
          animation-play-state: paused;
}
@-webkit-keyframes auto-play {
  0% {
    background-image: url(../image/sidebar/navbar/banner.jpg);
  }
  33.3% {
    background-image: url(../image/sidebar/navbar/banner2.jpg);
  }
  66.6% {
    background-image: url(../image/sidebar/navbar/banner3.jpg);
  }
  100% {
    background-image: url(../image/sidebar/navbar/banner4.jpg);
  }
}
@-moz-keyframes auto-play {
  0% {
    background-image: url(../image/sidebar/navbar/banner.jpg);
  }
  33.3% {
    background-image: url(../image/sidebar/navbar/banner2.jpg);
  }
  66.6% {
    background-image: url(../image/sidebar/navbar/banner3.jpg);
  }
  100% {
    background-image: url(../image/sidebar/navbar/banner4.jpg);
  }
}
@-o-keyframes auto-play {
  0% {
    background-image: url(../image/sidebar/navbar/banner.jpg);
  }
  33.3% {
    background-image: url(../image/sidebar/navbar/banner2.jpg);
  }
  66.6% {
    background-image: url(../image/sidebar/navbar/banner3.jpg);
  }
  100% {
    background-image: url(../image/sidebar/navbar/banner4.jpg);
  }
}
@keyframes auto-play {
  0% {
    background-image: url(../image/sidebar/navbar/banner.jpg);
  }
  33.3% {
    background-image: url(../image/sidebar/navbar/banner2.jpg);
  }
  66.6% {
    background-image: url(../image/sidebar/navbar/banner3.jpg);
  }
  100% {
    background-image: url(../image/sidebar/navbar/banner4.jpg);
  }
}
.banner-player a:not(.banner-bg) {
  height: 10px;
  width: 10px;
  border: 2px solid hsla(0, 0%, 100%, 0.3);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.4);
  margin-left: 10px;
  cursor: pointer;
  position: absolute;
  bottom: 24px;
  z-index: 5;
}
.banner-player a:nth-child(5) {
  right: 30px;
}
.banner-player a:nth-child(5):hover ~ .highlight-point {
  right: 30px;
  background-color: aqua;
}
.banner-player a:nth-child(4) {
  right: 50px;
}
.banner-player a:nth-child(3) {
  right: 70px;
}
.banner-player a:nth-child(2) {
  right: 90px;
}
.banner-player a:nth-child(6) {
  right: 90px;
  background-color: hsla(0, 0%, 100%, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
  -webkit-animation: auto-move 20s step-end infinite;
     -moz-animation: auto-move 20s step-end infinite;
       -o-animation: auto-move 20s step-end infinite;
          animation: auto-move 20s step-end infinite;
  pointer-events: none;
}
@-webkit-keyframes auto-move {
  0% {
    right: 90px;
  }
  33.3% {
    right: 70px;
  }
  66.6% {
    right: 50px;
  }
  100% {
    right: 30px;
  }
}
@-moz-keyframes auto-move {
  0% {
    right: 90px;
  }
  33.3% {
    right: 70px;
  }
  66.6% {
    right: 50px;
  }
  100% {
    right: 30px;
  }
}
@-o-keyframes auto-move {
  0% {
    right: 90px;
  }
  33.3% {
    right: 70px;
  }
  66.6% {
    right: 50px;
  }
  100% {
    right: 30px;
  }
}
@keyframes auto-move {
  0% {
    right: 90px;
  }
  33.3% {
    right: 70px;
  }
  66.6% {
    right: 50px;
  }
  100% {
    right: 30px;
  }
}